<template>
  <Anchor class="home-anchor">
    <AnchorLink v-for="link in list" :key="link.key" :href="link.key" :title="link.title"  />
  </Anchor>
</template>

<script lang='ts'>
import { defineComponent, ref } from 'vue';
import { Anchor } from 'ant-design-vue';

export default defineComponent({
  components: { Anchor, AnchorLink: Anchor.Link },
  setup() {
    const list = ref([
      { key: '#Port', title: '登录入口' },
      { key: '#Notice', title: '通知公告' },
      { key: '#Guide', title: '新人引导' },
      { key: '#Advant', title: '产品优势' },
      { key: '#Special', title: '特色主题' },
      { key: '#Help', title: '常见问题' },
    ])

    return { list }
  },
})
</script>

<style lang="less" scoped>
.home-anchor {
  position: fixed;
  top: 50%;
  z-index: 9999;

  ::v-deep(.ant-anchor-wrapper) {
    background: transparent;

    .ant-anchor-link {
      padding: 18px 48px 20px;
      border-bottom: 1px solid #F3F3F3;

      .ant-anchor-link-title{
        font-size: 16px;
        line-height: 22px;
        color: #999;
      }
    }
  }
}
</style>